<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>车享乐-登录</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
	<link rel="stylesheet" href="../../static/layui/css/layui.css">
	<script src="../../static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<style>
		body {
			background: url(../../static/pic/login-bg.jpg) no-repeat center;
			background-size: cover;
		}
		.title-box{
			height: 40px;
			background: url(../../static/pic/userlogin.png) no-repeat center;
			background-size: 100%;
		}
		.logo img {
			position: absolute; /* 将图片设置为绝对定位 */
			left: 50px; /* 将图片向右偏移200px */
			top: 0; /* 将图片置于父元素的顶部 */
		}
	</style>
</head>
<body>
	<div class="logo">
		<img src="../../static/pic/xx-logo.png" alt="">
	</div>

	<div>
		<div class="login_form_wrap clearfix">
			<div class="login_form fr">
				<div class="form_input">
					<div class="title-box"></div><br>
					<form class="layui-form" action="/user?method=login" method="post">
						<div class="demo-login-container">
							<div class="layui-form-item">
								<div class="layui-input-wrap">
									<div class="layui-input-prefix">
										<i class="layui-icon layui-icon-username"></i>
									</div>
									<input type="text" name="account" value="" lay-verify="required" placeholder="账   号" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-wrap">
									<div class="layui-input-prefix">
										<i class="layui-icon layui-icon-password"></i>
									</div>
									<input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-row">
									<div class="layui-col-xs7">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-vercode"></i>
											</div>
											<input type="text" name="code" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
										</div>
									</div>
									<div class="layui-col-xs5">
										<div style="margin-left: 10px;">
											<img src="/verifyCode" onclick="this.src='/verifyCode?t='+ new Date().getTime();" width="123.5px" height="38px">
										</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<input type="checkbox" name="autoLogin" lay-skin="primary" title="记住密码">
								<a href="/forget.jsp" style="float: right; margin-top: 7px;">忘记密码？</a>
							</div>
							<div class="layui-form-item">
								<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-form-item demo-login-other centered-container">
								<label>社交账号登录</label>
								<span style="padding: 0 21px 0 6px;">
									<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
									<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
									<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
								</span>
								或 <a href="/page/register">注册帐号</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script>
		layui.use(function(){
			var form = layui.form;
			// 提交事件
			form.on('submit(login)', function(data){
				var field = data.field; // 获取表单字段值

				$.post(
						'/user?method=login',
						field,
						function (result) {
							console.log(result);
							if (result.code == 0) {
								mylayer.okUrl(result.msg, '/');
							} else {
								mylayer.errorMsg(result.msg);
							}
						},
						'json'
				);
				return false; // 阻止默认 form 跳转
			});
		});
	</script>
</body>
</html>